<template>
  <div>
    <div class="base-wapper">
      <h3 class="titleInfo" @click="switchInfo('v-base')">
      <span :class="[baseInfo? 'el-icon-minus':'el-icon-plus']"></span>
      {{$t('webchat.basicInfo')}}
    </h3>
    <v-base
    v-show="baseInfo"
    :webchatData="webchatData"
    :chatInfo="chatInfo"
    :queueName="queueName"
    :channelSourceName="channelSourceName"
    :remark="remark">
      <ul class="chat_info_ul">
        <li class="clearBoth chat_info_li"><i v-once>{{$t('webchat.msgNum')}}：</i><span class="chat_info_li_con" :title="webchatData.totalMsgCount">{{webchatData.totalMsgCount}}</span></li>
        <li class="clearBoth chat_info_li"><i v-once>{{$t('webchat.endType')}}：</i><span class="chat_info_li_con" :title="webchatDataClone.finishReason">{{webchatDataClone.finishReason}}</span></li>
        <li class="clearBoth chat_info_li investigate_box">
            <i v-once>{{$t('webchat.evalution')}}：</i>
            <span class="investigate_box" v-show="investigateObj">
                <span class="chat_info_li_con" :title="investigateValue" @mouseenter="investigateShow(true)">{{investigateValue}}</span>
            </span>
            <ul v-show="investigate" class="investigate_con clearBoth" @mouseleave="investigateShow()" @mouseenter="investigateShow(true)">
            <li class="clearBoth">
                <i v-once>{{$t('webchat.evalution')}}：</i>
                <span>{{investigateValue}}</span>
            </li>
            <li class="clearBoth">
                <i v-once>{{$t('webchat.evalutionLabel')}}：</i>
                <span v-show="investigateLabel && investigateLabel.length > 0">{{investigateLabel}}</span>
            </li>
            <li class="clearBoth">
                <i v-once>{{$t('webchat.evalutionContent')}}：</i>
                <span class="investigate_content">{{investigateContent}}</span>
            </li>
            </ul>
        </li>
        <!-- <li class="clearBoth chat_info_li"><i>{{$t('webchat.fromSkillGroup')}}：</i><span class="chat_info_li_con" :title="chatInfo.queueName">{{chatInfo.queueName}}</span></li> -->
        <li class="clearBoth chat_info_li"><i v-once>{{$t('webchat.fromService')}}：</i><span class="chat_info_li_con" :title="webchatDataClone.username">{{webchatDataClone.username}}</span></li>
      </ul>
      <ul class="chat_info_ul chat_info_time_data">
        <li class="clearBoth chat_info_li"><i v-once>{{$t('webchat.beginDate')}}：</i><span class="chat_info_li_con" :title="webchatDataClone.beginDate">{{webchatDataClone.beginDate}}</span></li>
        <li class="clearBoth chat_info_li"><i v-once>{{$t('webchat.artificialStartTime')}}：</i><span class="chat_info_li_con" :title="webchatDataClone.manualTime">{{webchatDataClone.manualTime}}</span></li>
        <li class="clearBoth chat_info_li"><i v-once>{{$t('webchat.firstResponseDate')}}：</i><span class="chat_info_li_con" :title="webchatDataClone.firstReplyTime">{{webchatDataClone.firstReplyTime}}</span></li>
        <li class="clearBoth chat_info_li"><i v-once>{{$t('webchat.conversationEdnTime')}}：</i><span class="chat_info_li_con" :title="webchatDataClone.endTime">{{webchatDataClone.endTime}}</span></li>
        <li class="clearBoth chat_info_li"><i v-once>{{$t('webchat.dialogueDuration')}}：</i><span class="chat_info_li_con" :title="webchatDataClone.duration">{{webchatDataClone.duration}}</span></li>
      </ul>
    </v-base>
    </div>

    <div class="track-wapper" v-show="webchatData.platform === 'pc' || webchatData.platform === 'wap'">
      <h3 class="titleInfo" @click="switchInfo('v-track')">
        <span :class="[trackInfo && isComponent==='v-track' ? 'el-icon-minus':'el-icon-plus']"></span>
        {{$t('webchat.trackBrowseCount', { count: ubaInfoList.count ? ubaInfoList.count : 0 })}}
      </h3>
      <v-track
      v-show="trackInfo && isComponent==='v-track'"
      :userBehaviorVideoId="userBehaviorVideoId"
      :initUbaInfoList="ubaInfoList"
      @getVideos="getVideos"
      :tabType="tabType"
      :id="webchatData._id"
      :ubaSessionId="ubaSessionId">
      </v-track>
    </div>

    <div class="visit-wapper">
      <h3 class="titleInfo"  @click="switchInfo('v-visit')">
        <span :class="[visitInfo && isComponent==='v-visit' ? 'el-icon-minus':'el-icon-plus']"></span>
        {{$t('webchat.accessInformation')}}：({{visitInfoList.length}}{{$t('webchat.communication')}})
      </h3>
      <v-visit
      v-show="visitInfo && isComponent==='v-visit'"
      :visitInfoList="visitInfoList">
      </v-visit>
    </div>
  </div>
</template>

<script>
import BaseInfo from './BaseInfo'
import TrackInfo from './TrackInfo'
import VisitInfo from './VisitInfo'
export default {
  name: 'AuxiliaryInfoByAll',
  data: function () {
    return {
      isComponent: 'v-base',
      baseInfo: true,
      investigate: '',
      trackInfo: false,
      visitInfo: false,
      investigateObj: {},
      investigateValue: '',
      investigateLabel: '',
      investigateContent: ''
    }
  },
  props: {
    chatInfo: Object,
    tabType: String,
    visitInfoList: Array,
    remark: String,
    ubaInfoList: Object,
    userBehaviorVideoId: String,
    webchatData: Object,
    webchatDataClone: Object,
    ubaSessionId: String,
    queueName: String,
    channelSourceName: String
  },
  watch: {
    chatInfo (cur, old) {
      if (cur) {
        this.investigateObj = cur.investigate
        if (cur.investigate) {
          this.investigateValue = cur.investigate.value || ''
          this.investigateLabel = cur.investigate.label || ''
          this.investigateContent = cur.investigate.content || ''
        }
      }
    }
  },
  components: {
    'v-base': BaseInfo,
    'v-track': TrackInfo,
    'v-visit': VisitInfo
  },
  methods: {
    switchInfo (component) {
      this.isComponent = component
      switch (component) {
        case 'v-base':
          this.baseInfo = !this.baseInfo
          break
        case 'v-track':
          this.trackInfo = !this.trackInfo
          this.visitInfo = false
          break
        case 'v-visit':
          this.visitInfo = !this.visitInfo
          this.trackInfo = false
          break
      }
    },
    getVideos (state) {
      this.$emit('getVideos', state)
    },
    investigateShow (flag) {
      if (flag) {
        this.investigate = true
      } else {
        this.investigate = false
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .investigate_box
    position relative
  .chat_info .titleInfo
    cursor pointer
    font-weight bold
    color $cf-gray2
    margin-top 6px
  .el-icon-minus
  .el-icon-plus
    color $cf-level3
  .chat_info_time_data
    margin-top 20px
  .investigate_con
    position absolute
    bottom 0
    width 100%
    left 0
    background $cf-white
    box-shadow 0 0 8px #aaa
    padding 8px
    box-sizing border-box
  li
    margin-bottom 6px
  .investigate_content
    /*float none*/
    clear both
    display inline
    word-break break-all
    white-space normal
  span
    color $cf-level2
</style>
